<template>
  <div class="profile-page">
    <div class="profile-header">
      <h2>个人中心</h2>
      <button @click="userStore.logout" class="logout-btn">退出登录</button>
    </div>

    <div class="profile-content">
      <!-- VIP等级信息 -->
      <div v-if="userStore.userInfo?.vipLevel" class="vip-card">
        <div class="vip-header">
          <div class="vip-badge" :style="{ backgroundColor: userStore.userInfo.vipLevel.color }">
            <span class="vip-level">{{ userStore.userInfo.vipLevel.name }}</span>
            <span class="vip-icon">👑</span>
          </div>
          <div class="vip-expire">
            <span v-if="userStore.userInfo.vipExpireDate">
              到期时间: {{ formatDateTime(userStore.userInfo.vipExpireDate) }}
            </span>
            <span v-else class="vip-permanent">永久会员</span>
          </div>
        </div>
        <div class="vip-benefits">
          <div class="benefit-item" v-if="userStore.userInfo.vipLevel.hdQuality">
            <span class="benefit-icon">🎬</span> 高清画质
          </div>
          <div class="benefit-item" v-if="userStore.userInfo.vipLevel.adFree">
            <span class="benefit-icon">🚫</span> 无广告
          </div>
          <div class="benefit-item" v-if="userStore.userInfo.vipLevel.exclusiveContent">
            <span class="benefit-icon">⭐</span> 独家内容
          </div>
          <div class="benefit-item" v-if="userStore.userInfo.vipLevel.prioritySupport">
            <span class="benefit-icon">💬</span> 优先客服
          </div>
        </div>
      </div>

      <!-- 用户信息 -->
      <div class="profile-section">
        <h3>基本信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <label>用户名</label>
            <span>{{ userStore.userInfo?.username }}</span>
          </div>
          <div class="info-item">
            <label>邮箱</label>
            <span>{{ userStore.userInfo?.email }}</span>
          </div>
          <div class="info-item">
            <label>注册时间</label>
            <span>{{ formatDate(userStore.userInfo?.createdAt) }}</span>
          </div>
          <div class="info-item">
            <label>会员状态</label>
            <span v-if="userStore.userInfo?.vipLevel" class="vip-status">
              {{ userStore.userInfo.vipLevel.name }}
            </span>
            <span v-else class="non-vip">普通用户</span>
          </div>
          <div class="info-item">
            <label>积分</label>
            <span>{{ userStore.userInfo?.points || 0 }}</span>
          </div>
          <div class="info-item">
            <label>最后登录</label>
            <span>{{ formatDateTime(userStore.userInfo?.lastLogin) }}</span>
          </div>
        </div>
      </div>

      <!-- 偏好设置 -->
      <div class="profile-section">
        <h3>播放偏好</h3>
        <div class="preferences">
          <div class="pref-item">
            <label>默认清晰度</label>
            <select v-model="preferences.defaultQuality" @change="savePreferences">
              <option value="720p">720p</option>
              <option value="1080p">1080p</option>
              <option value="4k">4K</option>
            </select>
          </div>
          <div class="pref-item">
            <label>字幕语言</label>
            <select v-model="preferences.subtitleLanguage" @change="savePreferences">
              <option value="zh">中文</option>
              <option value="en">英文</option>
              <option value="jp">日文</option>
            </select>
          </div>
          <div class="pref-item">
            <label>
              <input type="checkbox" v-model="preferences.autoPlay" @change="savePreferences">
              自动播放下一集
            </label>
          </div>
          <div class="pref-item">
            <label>主题</label>
            <select v-model="preferences.theme" @change="savePreferences">
              <option value="dark">深色</option>
              <option value="light">浅色</option>
              <option value="auto">跟随系统</option>
            </select>
          </div>
        </div>
      </div>

      <!-- 隐私设置 -->
      <div class="profile-section">
        <h3>隐私设置</h3>
        <div class="privacy-settings">
          <div class="privacy-item">
            <label>
              <input type="checkbox" v-model="privacySettings.watchHistoryPublic">
              公开观看记录
            </label>
          </div>
          <div class="privacy-item">
            <label>
              <input type="checkbox" v-model="privacySettings.favoritesPublic">
              公开收藏列表
            </label>
          </div>
          <div class="privacy-item">
            <label>
              <input type="checkbox" v-model="privacySettings.ratingsPublic">
              公开评分
            </label>
          </div>
        </div>
      </div>

      <!-- 数据管理 -->
      <div class="profile-section">
        <h3>数据管理</h3>
        <div class="data-management">
          <button @click="clearWatchHistory" class="data-btn warning">
            清空观看记录 ({{ userStore.watchHistoryList.length }})
          </button>
          <button @click="exportUserData" class="data-btn">
            导出用户数据
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useUserStore } from '../store/user';
import { ElMessage, ElMessageBox } from 'element-plus';

const userStore = useUserStore();

const preferences = ref({ ...userStore.userPreferences });
const privacySettings = ref({
  watchHistoryPublic: false,
  favoritesPublic: true,
  ratingsPublic: true
});

watch(() => userStore.userPreferences, (newPrefs) => {
  preferences.value = { ...newPrefs };
}, { immediate: true });

const formatDate = (dateString) => {
  if (!dateString) return '-';
  return new Date(dateString).toLocaleDateString('zh-CN');
};

const formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return '-';
  return new Date(dateTimeString).toLocaleString('zh-CN');
};

const savePreferences = () => {
  userStore.updatePreferences(preferences.value);
};

const clearWatchHistory = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要清空观看记录吗？此操作不可恢复。',
      '确认清空',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
    userStore.clearWatchHistory();
    ElMessage.success('观看记录已清空');
  } catch (error) {
    // 用户取消操作
    ElMessage.info('已取消清空操作');
  }
};

const exportUserData = () => {
  const data = {
    userInfo: userStore.userInfo,
    favorites: userStore.favoriteMovies,
    watchHistory: userStore.watchHistoryList,
    ratings: userStore.userRatings,
    preferences: userStore.userPreferences,
    exportDate: new Date().toISOString()
  };

  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `movie_app_data_${new Date().getTime()}.json`;
  a.click();
  URL.revokeObjectURL(url);
  
  ElMessage.success('用户数据导出成功');
};
</script>

<style scoped>
.profile-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.logout-btn {
  background: #e53e3e;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.profile-section {
  background: var(--card);
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.profile-section h3 {
  margin-bottom: 20px;
  color: var(--text);
  border-bottom: 1px solid #2d3748;
  padding-bottom: 10px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-item label {
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}

.preferences, .privacy-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pref-item, .privacy-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pref-item label, .privacy-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

select, input[type="checkbox"] {
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 4px;
  padding: 6px 8px;
  color: var(--text);
}

.data-management {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.data-btn {
  padding: 8px 16px;
  border: 1px solid #2d3748;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.data-btn.warning {
  border-color: #e53e3e;
  color: #e53e3e;
}

.data-btn:hover {
  background: #2d3748;
}

.data-btn.warning:hover {
  background: #e53e3e;
  color: white;
}

/* VIP卡片样式 */
.vip-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.vip-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 16px;
}

.vip-level {
  font-size: 18px;
  font-weight: bold;
}

.vip-icon {
  font-size: 20px;
}

.vip-expire {
  font-size: 14px;
  opacity: 0.9;
}

.vip-permanent {
  color: #ffd700;
  font-weight: 600;
}

.vip-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  opacity: 0.9;
}

.benefit-icon {
  font-size: 16px;
}

.vip-status {
  color: #667eea;
  font-weight: 600;
  padding: 4px 8px;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 4px;
}

.non-vip {
  color: #718096;
  font-style: italic;
}

@media (max-width: 768px) {
  .profile-page {
    padding: 10px;
  }
  
  .profile-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .data-management {
    flex-direction: column;
  }
  
  .vip-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .vip-benefits {
    grid-template-columns: 1fr;
  }
}
</style>